import classNames from 'classnames';
import React from 'react';
import { TabPaneProps } from '../interface';

const TabPane = React.forwardRef<HTMLDivElement, TabPaneProps>((props, ref) => {
  const { prefixCls, id, tabKey, active, style, className, children } = props;
  return (
    <div
      id={id && `${id}-panel-${tabKey}`}
      role="tabpanel"
      tabIndex={active ? 0 : -1}
      aria-labelledby={id && `${id}-tab-${tabKey}`}
      aria-hidden={!active}
      style={style}
      className={classNames(
        prefixCls,
        active && `${prefixCls}-active`,
        className,
      )}
      ref={ref}
    >
      {children}
    </div>
  );
});

export default TabPane;
